<template>
	<view class="Setting">
		<AppNavbar :bgColor="'#ededed'" :title="state.title" titlecolor="#000" leftIconColor="#000" :fontWeight="900">
		</AppNavbar>
		<Myform :data="state.formData" :border="true" padding="20rpx 10rpx" margin="30rpx 0rpx" :label="true"
			ref="myFormRef" :rules="state.rules" formBgColor="transparent" bgColor="#fff" settingCode
			style="margin-top: 100rpx;" fontSize="15" color="#d0cfcf">
		</Myform>
		<button class="Setting-button mx-3  color-fff" @click="successBackFun">OK</button>
		<up-modal :show="popAttr.show">

			<view class="flex-between-center flex-column">
				<image src="/static/image/success.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
				<text class="font-weight-600 mt-2">Modified successfully</text>
			</view>

			<template #confirmButton>
				<up-button text="OK" plain shape="circle" size="small" color="#11e2bd" style="width: 150rpx;"
					@click="popAttr.show=false"></up-button>
			</template>
		</up-modal>
	</view>
</template>

<script setup>
	import {
		updatePwdByEmailApi
	} from '@/api/account.js'
	const myFormRef = ref(null)
	const state = reactive({
		title: 'Change milbox',
		formData: [{
				prop: 'userEmail',
				label: 'E-Mail',
				value: '',

			},
			{
				prop: 'newPassword',
				label: 'New password',
				value: '',
				type: 'private',
				line: true
			},
			{
				prop: 'conFirmPassword',
				label: 'Confirm new password',
				value: '',
				type: 'private',
				line: true
			},

			{
				prop: 'code',
				label: 'verification code',
				value: '473202',
				type: 'Code',
				reference: 'ueForeEmail',
				codeType: 'email'
			},
		],
		rules: {
			code: 'code',
			userEmail: 'email',
			newPassword: 'password',
			conFirmPassword: {
				prop: 'newPassword',
				type: 0
			}
		},
	})
	const popAttr = reactive({
		show: false,
		onlyCancel: true
	})

	const successBackFun = async () => {
		// console.log(111);
		// popAttr.show = true

		// updateEmailApi()
		const data = await myFormRef.value.verify()
		if (!data) {
			return
		}
		const res = await updatePwdByEmailApi(data)
		console.log(res);
	}

	function toForget() {
		uni.$to('/pages/Setting/forgotPassword')
	}
</script>

<style lang="scss" scoped>
	.Setting {

		// border: 1px solid red;
		background-color: #ededed;
		min-height: 100vh;
		padding: 0 32rpx;


		.Setting-code {
			display: flex;
			justify-content: flex-end;

			button {
				width: 300rpx;
				margin: 0;
			}
		}

		.Setting-button {
			background: $uni-bg-linear;
			margin-top: 120rpx;
		}

		::v-deep .u-form-item__body__left__content__label {
			font-weight: 900;
			font-size: 22rpx;
		}
	}
</style>